<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 
        1. 调用父组件的的数据和方法 分别用到 v-bind: 和 v-on : 将父组件的数据和方法绑定到 中间变量
        2. 调用父组件的数据 用到 props 这个数据
        3. 调用父组件的方法 用到 $emit 这个方法
     -->
    <div id="app">
        <!-- 在模板上绑定父组件的数据 绑定父组件的方法-->
        <mycom1 :parentmsg="msg" @foo="parentMethods"></mycom1>

    </div>
    <template id="com1">
        <div>
            <h1>这是子组件 --- {{ parentmsg }}</h1>
            <input type="button" value="点击调用父组件的方法" @click="click">
        </div>
    </template>
    <script>
        var mycom1 = {
            template : '#com1',
            //通过绑定属性的方式将绑定 定义的变量 存到子组件中 props 数组中,才能在模板中调用
            props : ['parentmsg'],
            methods: {
                click(){
                    // 触发父组件的方法,需要用到 $emit 方法, 
                    // 其中如果父组件的方法需要传参,$emit中是可以传参的: $this.$emit('自定义的名称',形参1,形参2....)
                    this.$emit('foo')
                }
            },
        }
        new Vue({
            el : '#app',
            data : {
                msg : '我是父组件的数据'
            },
            methods : {
                parentMethods(){
                    console.log('我是父组件的方法');
                    
                }
            },
            components : {
                mycom1
            }
        })
    
    
    </script>
</body>
</html>